<template>
	<view class="confirmlnfoBreakdown">
		<view class="BreakdownHead"><text>费用明细</text></view>
		<view v-if="list?list.length:0">
			<view class="BreakdownItem" v-for="v in list" :key="v.cname">
				<view>
					<text>{{v.cname}}</text>
					<text>
						单价：¥{{v.price}}
						<text>数量：{{v.num}}</text>
					</text>
				</view>
				<view><text>￥{{v.totalPrice}}</text></view>
			</view>
		</view>
		<view v-else class="BreakdownItem">
			<text>暂无明细</text>
		</view>
	</view>
</template>

<script setup>
	const prop = defineProps({
		list: []
	})
</script>

<style lang="less" scoped>
	.confirmlnfoBreakdown {
		width: 680rpx;
		margin: 25rpx auto;
		background-color: #fff;
		border-radius: 10rpx;
		border: 1px solid #f5f4f5;
		padding: 0 30rpx;
		box-sizing: border-box;

		.BreakdownHead {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			color: #ababab;
			border-bottom: 1px solid #f3f3f3;
		}

		.BreakdownItem {
			width: 100%;
			height: 140rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f3f3f3;

			&:last-child {
				border-bottom: none;
			}

			view:first-child {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 100%;
				font-size: 30rpx;
				font-weight: 600;
				padding: 20rpx 0;
				box-sizing: border-box;

				text:nth-child(2) {
					font-size: 28rpx;
					color: #aaaaaa;
				}
			}

			view:last-child {
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 600;
				font-size: 28rpx;
			}
		}
	}
</style>
